﻿<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>JS Bubbles</title>

	<link rel="stylesheet" type="text/css" href="css/normal.css" />
	<link rel="stylesheet" type="text/css" href="css/jquery.jnotify.css" />
	<link rel="stylesheet" type="text/css" href="css/themes.css" />
	<script type="text/javascript" src="scripts/jquery-1.4.2.min.js "></script>
<!--	<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jQuery/jquery-1.4.2.min.js "></script> -->
	<script type="text/javascript" src="scripts/storage.js"></script>
	<script type="text/javascript" src="scripts/jquery.tmpl.js"></script>
	<script type="text/javascript" src="scripts/jquery.ezCookie.js"></script>
	<script type="text/javascript" src="scripts/jquery.jnotify.jw.js"></script>
	<script type="text/javascript" src="scripts/game-options.js"></script>
	<script type="text/javascript" src="scripts/game-stats.js"></script>
	<script type="text/javascript" src="scripts/game-core.js"></script>
	<script type="text/javascript" src="scripts/game-ui.js"></script>
	<meta http-equiv='cache-control' content='no-cache'/>
	<script type="text/javascript" >
		function loadCss (fileName) {
			if (fileName !== "") {
				htmldef = '<link rel="stylesheet" type="text/css" id="themeCss" href="css/themes/theme_flame.css" />';
				$("head").append(htmldef);
			}
			else {
				$("head link#themeCss").remove();
			}
		}
	</script>
</head>
<body>
<!-- AddThis Button BEGIN -->
	<script type="text/javascript">
	var addthis_config =
	{
		ui_508_compliant: true
	}
	</script>
	<div id="socialTools" style="float: left; width: 30%;">

		<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#username=xa-4cf044e41b9057da"></script>
	<!-- AddThis Button END -->
		<div class="menuBlock">
			<p><strong>Player tools:</strong></p>
			<ul>
				<li><a href="http://code.google.com/p/js-bubbles/issues/entry">Send an issue</a></li>
			</ul>
			<div><a href="#" onclick="loadCss('')" class="themeSwitcher" id="standardTheme">Standard theme</a></div>
			<div><a href="#" onclick="loadCss('theme_flame.css')" class="themeSwitcher" id="flameTheme">Flame theme</a></div>
			
			<div class="addthis_toolbox addthis_32x32_style addthis_default_style">
				<a class="addthis_button_facebook"></a>
				<a class="addthis_button_twitter"></a>
				<a class="addthis_button_wykop"></a>
				<a class="addthis_button_blip"></a>
				<a class="addthis_button_email"></a>
				<a class="addthis_button_favorites"></a>
				<a class="addthis_button_compact"></a>
			</div>
		</div>
	</div>
	<div id="PlayerTools" style="float: right; width: 30%;">
		<div id="playAlso" class="menuBlock" style="margin-left: 50px;"><strong>Play also:</strong>
			<ul>
				<li><a href="http://grenlibre.fr/demo/same/">The same game</a></li>
				<li><a href="http://www.yvoschaap.com/chainrxn/">Chain Reaction</a></li>
				<li><a href="http://dougx.net/plunder/index.php">GALACTIC PLUNDER</a></li>
			</ul>
		</div>
	</div>
	<div id="container">
		<div id="header"><h1>JS Bubbles</h1></div>
		<div id="switchedPanel">
			<div id="boardPanel">
				<div id="gameTypeTitle" class="scoreStatsData" style="clear: both;">Game type: <span id="gameTypeValue"></span></div>
				<!-- obszar na magazy kul (zależnie od typu gry) -->
				<div id="storeArea"></div>
				<!-- obszar na planszę gry -->
				<div id="boardArea"></div>
				<!-- narzędzia gry -->
				<div style="float: left; text-align: center;" id="optionsSwitch">
					<input type="image" src="images/rewind_gray.png" id="undoBtn" alt="Undo move" title="Undo move"/><br/><br/>
					<input type="image" src="images/reload.png" id="newGameBtn" alt="New game" title="New game"/><br/><br/>
					<input type="image" src="images/spanner_48.png" id="optionsSwitchBtn" alt="Settings" title="Settings"/><br/><br/>
					<input type="image" src="images/cup.png" id="resultsSwitchBtn" alt="Results" title="Show results"/><br/><br/>
					<input type="image" src="images/help.png" id="helpSwitchBtn" alt="Help" title="Show help"/><br/><br/>
				</div>
				<div style="clear: both;">
					<span id="selectedScore" class="scoreStatsData">Points: <span id="scoreValue">0</span></span>
					<span id="totalScore" class="scoreStatsData">Game score: <span id="totalScoreValue">0</span></span>
				</div>
			</div>
			<!-- panel ustawień gry -->
			<div id="controlPanel" class="panel">
				<div class="panelView">
					<div class="panelContent">
						<div id="options">
							<p>
								<label for="boardDimensionId">Board size:</label>
								<select name="boardDimension" id="boardDimensionId">
								</select>
							</p>
							<div>Game type:</div>
							<p>
								<input type="image" src="images/empty.png" value="Standard" title="Choose a game type: Standard" id="gmt1" class="gameTypeIcon" />
								<input type="image" src="images/empty.png" title="Choose a game type: Compressive" value="Compressive" id="gmt2" class="gameTypeIcon" />
								<input type="image" src="images/empty.png" title="Choose a game type: Add balls" value="Add balls" id="gmt3" class="gameTypeIcon" />
                                <input type="image" src="images/empty.png" title="Choose a game type: Add balls and compress" value="Add balls and compress" id="gmt4" class="gameTypeIcon" />
							</p>
							<p style="clear: both;">
								<input type="checkbox" value="1" checked="checked" id="oneClickMode" /><label for="oneClickMode">Select before remove</label>
							</p>
                            <p>
                                <label for="boardBkgUrl">Backgroud image address</label><br />
                                <input type="text" id="boardBkgUrl" />
                            </p>
							<!--<p>
                                <label><input type="checkbox" id="canPlaySounds" />Play sounds</label>
                            </p> -->
						</div>
					</div>
					<div class="panelButtons">
						<input type="button" value="Cancel" id="settingsCancelBtn" />
						<input type="button" value="OK" id="settingOkBtn" />
					</div>
				</div>
			</div>
			<!-- panel wyników gry -->
			<div id="scorePanel" class="panel">
				<div class="panelView">
					<div class="panelContent">
						<div id="scoredGameType">Game mode: <span id="gameTypeName">0</span></div>
						<hr style="margin-bottom: 10px;"/>
						<div id="maxScore" class="scoreStatsData"><img src="images/user7.png" alt="Best score" style="vertical-align: middle; margin-right: 5px;" />Best score: <span id="maxScoreValue">0</span></div>
						<div id="playedGames" class="scoreStatsData">Games: <span id="playedGamesValue">0</span></div>
						<div id="avgScore" class="scoreStatsData">Avarange score: <span id="avgScoreValue">0</span></div>
						<hr style="margin: 10px auto;"/>
						<table id="resultsStats">
							<tr id="resultsStatsHeader">
								<th>Game type</th>
								<th>Max result</th>
								<th>Games</th>
								<th>Avg result</th>
							</tr>
						</table>
						<script id="resultsTable" type="text/x-jquery-tmpl">
							<tr>
								<td>${gameType}</td>
								<td>${max}</td>
								<td>${games}</td>
								<td>${avg}</td>
							</tr>
						</script>
					</div>
					<div class="panelButtons">
						<input type="button" value="Clear" id="scoreClearBtn" style="float: left;" />
						<input type="button" value="Close" id="scoreCloseBtn" />
					</div>
				</div>
			</div>
			<!-- panel pomocy -->
			<div id="helpPanel" class="panel">
				<div class="panelView">
					<div class="panelContent"><img src="images/jsb_logo.png" id="jsb_logo_icon" />
						<h1>JS Bubbles</h1>
						<p>version: <script type="text/javascript" language="javascript">document.write(gameVersion);</script></p
						<p style="margin-top: 20px; clear: both;">Author: <strong>Jarosław Wasilewski</strong></p>
						
						<p>e-mail: <a href="mailto:orajo@windowslive.com">orajo@windowslive.com</a></p>

						<p style="margin-top: 20px;">
							<a href="http://code.google.com/p/js-bubbles/" target="_blank">Project page on Google Code</a>
							<a href="http://twitter.com/orajo" title="Follow me on Twitter" target="_blank"><img src="images/twitter.png" alt="Follow me on Twitter" border="0"/></a></p>
					</div>
					<div class="panelButtons">
						<input type="button" value="Close" id="helpCloseBtn" />
					</div>
				</div>
			</div>
		</div>
		<div style="clear: both;"></div>
		<div id="footer">
			&copy; 2009 - 2010, Jarosław Wasilewski
		</div>
	</div>
	<audio id="audio_bang" preload="auto">
		<source src="bomb-02.mp3" /> 
		<source src="bomb-02.wav" /> 
	</audio>

	<script type="text/javascript">

		var _gaq = _gaq || [];
		_gaq.push(['_setAccount', 'UA-19953870-2']);
		_gaq.push(['_trackPageview']);

		(function () {
			var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
			ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
			var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
		})();

</script>
</body>
</html>